<template>
    <el-container style="height: 100%">
        <el-aside class="detail-left" width="300px" style="height: 100%">
            <el-container style="height: 100%">
                <el-header class="headborder" height="49%">
                    <cls-detail-head></cls-detail-head>
                </el-header>
                <el-footer class="headborder" height="49%">
                    <cls-detail-stus></cls-detail-stus>
                </el-footer>
            </el-container>
        </el-aside>
        <el-main class="detail-main headborder ">
            <el-tabs v-model="planActiveName" @tab-click="">
                <el-tab-pane label="按时间课节" name="first">
                    <cls-detail-period-record></cls-detail-period-record>
                </el-tab-pane>
                <el-tab-pane label="按批次课节" name="second">
                    <cls-detail-period-rule></cls-detail-period-rule>
                </el-tab-pane>
            </el-tabs>
        </el-main>
        <el-dialog
            title="提示"
            :visible.sync="modifyUserVisible"
        >
            <add-student ref="stupanel" :childForm="userForm"></add-student>
        </el-dialog>


    </el-container>

</template>
<script>
    import {mapActions, mapState, mapGetters} from 'vuex'
    import headTop from '../components/headTop'
    import {getUserList, getUserCount} from '@/api/getData'
    import userDetailPanel from '@/page/components/userDetailPanel'
    import clsDetailHead from '@/page/components/clsDetailHead.vue'
    import clsDetailStus from '@/page/components/clsDetailStus'
    import clsDetailPeriodRecord from '@/page/components/clsDetailPeriodRecord'
    import clsDetailPeriodRule from '@/page/components/clsDetailPeriodRule'


    export default {
        data() {
            return {
                planActiveName:'first',
                userForm: {},
                activityPanel: '',
                modifyUserVisible: false,
            }
        },
        components: {
            userDetailPanel,
            clsDetailHead,
            clsDetailStus,
            clsDetailPeriodRecord,
            clsDetailPeriodRule,

        },
        created() {

        },
        methods: {}
    }
</script>

<style lang="less">
    @import '../style/mixin';

    .detail-left {

    }

    .detail-main {
    }

    .detail-title {
        font-size: 12px;
        font-weight: 500;
    }

    .user-detail {
        // #background-color: #F7F6F8;
    }

    .headborder {
        padding:0 0px;
        margin-top: 5px;
        margin-left: 2px;
        border: solid 1px #e4e4e4;

    }
</style>
